<template>
    <div class="login">
        <div class="login-box">
            <div class="login-table">
                <div class="logo-box">
                    <img src="" alt="" />
                </div>
                <div>
                    <div class="name-txt">账号</div>
                    <div class="input-txt"><input v-model="userName" type="text" @blur="changeEdit(userName, 'noName')" /></div>
                    <div v-if="noName" class="name-ts">请输入账号</div>
                    <div class="name-txt">密码</div>
                    <div class="input-txt"><input v-model="passWordCode" type="password" @blur="changeEdit(passWordCode, 'noWorld')" /></div>
                    <div class="name-txt">验证码</div>
                    <div v-if="noWorld" class="name-ts passworld-ts">请输入密码</div>
                    <div class="input-yzm">
                        <input v-model="code" type="text" @blur="changeEdit(code, 'noCode')" />
                        <img :src="captimage.codeData" alt="" />
                        <div v-if="noCode" class="name-ts">请输入验证码</div>
                    </div>
                    <div class="login-btn" @click="clickLogin">登录</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Login',
    setup() {
        const router = useRouter();
        const state = reactive({
            userName: 'superAdmin',
            passWordCode: 'basex@Uino',
            code: '',
            noName: false,
            noWorld: false,
            noCode: false,
        });
        const captimageData = reactive({
            captimage: {
                codeData: '',
                uuid: '',
            },
        });
        const clickLogin = async () => {
            const param = {
                account: state.userName,
                code: state.code,
                password: state.passWordCode,
                uuid: captimageData.captimage.uuid,
            };
            if (!state.userName) {
                state.noName = true;
                return;
            }
            if (!state.passWordCode) {
                state.noWorld = true;
                return;
            }
            if (!state.code) {
                state.noCode = true;
                return;
            }
            await requestLogin(param);
        };
        const changeEdit = (value: any, name: any) => {
            if (value) {
                // @ts-ignore
                state[name] = false;
            } else {
                // @ts-ignore
                state[name] = true;
            }
        };
        // 登录用户信息
        const requestLogin = async (loginForm: any) => {
            const result: any = await window.TiIns.Core?.Api.login(loginForm);
            const code = result?.code;
            switch (code) {
                // 登录成功存储token,获取用户信息
                case 200:
                    window.TiIns.Core.options.token = result.data;
                    localStorage.setItem('ACCESS_TOKEN', result.data);
                    router.push('/');
                    break;
                // 登录不成功更新验证码
                case 500:
                    getCaptmage();
                    break;
                default:
                    break;
            }
            return result;
        };
        // 退出登录
        const logout = () => {
            getCaptmage();
            window.TiIns.options.token = '';
            localStorage.setItem('ACCESS_TOKEN', '');
        };
        // 获取验证码
        const getCaptmage = () => {
            window.TiIns.Core?.Api.getCaptchaImage().then((res: any) => {
                const codeData = res.data;
                const imgData: any = {
                    codeData: `data:image/gif;base64,${codeData.img}`,
                    uuid: codeData.uuid,
                };
                captimageData.captimage = imgData;
            });
        };
        getCaptmage();
        const returnFun = () => {
            logout();
            state.code = '';
        };
        return {
            ...toRefs(state),
            ...toRefs(captimageData),
            clickLogin,
            changeEdit,
            returnFun,
        };
    },
};
</script>
<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;

    .login-box {
        position: relative;
        width: 100%;
        height: 100%;
        background: rgb(64 64 67 / 40%);
        backdrop-filter: blur(5px);

        .name-ts {
            position: absolute;
            right: 50px;
            color: red;
            font-size: 12px;
        }

        .passworld-ts {
            top: 245px;
        }

        .inf-box {
            padding-top: 40px;

            .name {
                display: flex;
                height: 30px;
                margin-top: 10px;
                padding: 0 10px;
                border-radius: 4px;
                background: #3836302f;
                line-height: 30px;
            }

            .ret-btn {
                position: absolute;
                top: 90px;
                right: 50px;
                font-weight: 700;
                cursor: pointer;
            }
        }

        .login-table {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 99;
            box-sizing: border-box;
            width: 400px;
            height: 450px;
            margin: auto;
            padding: 40px 50px 10px;
            border-radius: 8px;
            background: rgb(236 233 233 / 43.2%);

            .logo-box {
                width: 100%;
                text-align: center;

                img {
                    width: 160px;
                }
            }

            .name-txt {
                margin-top: 7px;
                color: rgb(0 0 0 / 100%);
                font-size: 16px;
                letter-spacing: 3px;
            }

            .input-txt {
                width: 100%;
                margin-top: 7px;

                input {
                    box-sizing: border-box;
                    width: 100%;
                    height: 40px;
                    padding: 0 8px;
                    border: none;
                    border-radius: 4px;
                    background: rgb(224 220 220);
                    line-height: 40px;
                }
            }

            .input-yzm {
                width: 100%;
                margin-top: 7px;

                input {
                    vertical-align: bottom;
                    box-sizing: border-box;
                    width: 120px;
                    height: 40px;
                    padding: 0 8px;
                    border: none;
                    border-radius: 4px;
                    background: rgb(224 220 220);
                    line-height: 40px;
                }

                img {
                    height: 40px;
                    margin-top: -5px;
                    margin-left: 73px;
                    border-radius: 4px;
                    cursor: pointer;
                }
            }

            .login-btn {
                width: 100%;
                height: 40px;
                margin-top: 40px;
                border-radius: 4px;
                background: #f4b315;
                color: #ffffff;
                font-size: 18px;
                line-height: 40px;
                letter-spacing: 5px;
                text-align: center;
                cursor: pointer;
            }

            input:focus {
                outline: 1px solid #f4b315;
            }
        }
    }
}
</style>
